<template>
  <div>
    <div class="node-wrap" v-if="nodeConfig.type != 4">
      <div
        @click="setPerson"
        class="node-wrap-box"
        :class="
          (nodeConfig.type == 0 ? 'start-node ' : '') +
          (isTried && nodeConfig.error ? 'active error' : '')
        "
      >
        <div v-if="nodeConfig.type == 0" style="margin-top: 13px">
          <span class="editable-title">{{ nodeConfig.nodeName }}</span>
        </div>
        <div v-else>
          <!-- <div
            class="title"
            :style="
              'background: rgb(' +
              ['87, 106, 149', '255, 148, 62', '50, 150, 250'][
                nodeConfig.type
              ] +
              ');'
            "
          > -->
          <div class="title">
            <span class="editable-title">{{ nodeConfig.nodeName }}</span>
            <i class="anticon anticon-close close" @click.stop="delNode()" />
          </div>
          <div class="content">
            <div class="text" v-if="nodeConfig.type == 1">
              <span class="placeholder">
                {{
                  nodeConfig.scriptName ? nodeConfig.scriptName : "请设置任务"
                }}
              </span>
            </div>
          </div>
          <div class="error_tip" v-if="isTried && nodeConfig.error">
            <i
              class="anticon anticon-exclamation-circle"
              style="color: rgb(242, 86, 67)"
            ></i>
          </div>
        </div>
      </div>
      <addNode :childNodeP.sync="nodeConfig.childNode"></addNode>
    </div>
    <div class="branch-wrap" v-if="nodeConfig.type == 4">
      <div class="branch-box-wrap">
        <div class="branch-box">
          <button class="add-branch" @click="addTerm">添加分支</button>
          <div
            class="col-box"
            v-for="(item, index) in nodeConfig.conditionNodes"
            :key="index"
          >
            <div class="condition-node">
              <div class="condition-node-box">
                <div
                  @click="setPerson"
                  class="auto-judge"
                  :class="isTried && item.error ? 'error active' : ''"
                >
                  <div class="title-wrapper">
                    <span class="editable-title">{{ item.nodeName }}</span>
                    <i
                      class="anticon anticon-close close"
                      @click.stop="delTerm(index)"
                    ></i>
                  </div>
                  <div class="content">
                    <span class="placeholder">
                      {{
                        nodeConfig.scriptName
                          ? nodeConfig.scriptName
                          : "请设置任务"
                      }}
                    </span>
                    <!-- {{ $func.conditionStr(nodeConfig, index) }} -->
                  </div>
                  <div class="error_tip" v-if="isTried && item.error">
                    <i
                      class="anticon anticon-exclamation-circle"
                      style="color: rgb(242, 86, 67)"
                    ></i>
                  </div>
                </div>
                <addNode :childNodeP.sync="item.childNode"></addNode>
              </div>
            </div>
            <nodeWrap
              v-if="item.childNode && item.childNode"
              :nodeConfig.sync="item.childNode"
              :tableId="tableId"
              :isTried.sync="isTried"
            ></nodeWrap>
            <div class="top-left-cover-line" v-if="index == 0"></div>
            <div class="bottom-left-cover-line" v-if="index == 0"></div>
            <div
              class="top-right-cover-line"
              v-if="index == nodeConfig.conditionNodes.length - 1"
            ></div>
            <div
              class="bottom-right-cover-line"
              v-if="index == nodeConfig.conditionNodes.length - 1"
            ></div>
          </div>
        </div>
        <addNode :childNodeP.sync="nodeConfig.childNode"></addNode>
      </div>
    </div>
    <nodeWrap
      v-if="nodeConfig.childNode && nodeConfig.childNode"
      :nodeConfig.sync="nodeConfig.childNode"
      :tableId="tableId"
      :isTried.sync="isTried"
    ></nodeWrap>
  </div>
</template>
<script>
export default {
  props: ["nodeConfig", "flowPermission", "isTried", "tableId"],
  data() {
    return {
      isInputList: [],
      isInput: false,
    };
  },
  mounted() {
    if (this.nodeConfig.type == 1) {
      this.nodeConfig.error = !this.$func.setApproverStr(this.nodeConfig);
    } else if (this.nodeConfig.type == 4) {
      for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
        this.nodeConfig.conditionNodes[i].error =
          this.$func.conditionStr(this.nodeConfig, i) == "请设置分支任务" &&
          i != this.nodeConfig.conditionNodes.length - 1;
      }
    }
  },
  computed: {
    flowPermission1() {
      return this.$store.state.flowPermission;
    },
    approverConfig1() {
      return this.$store.state.approverConfig;
    },
    copyerConfig1() {
      return this.$store.state.copyerConfig;
    },
    conditionsConfig1() {
      return this.$store.state.conditionsConfig;
    },
  },
  watch: {
    flowPermission1(data) {
      if (data.flag && data.id === this._uid) {
        this.$emit("update:flowPermission", data.value);
      }
    },
    approverConfig1(data) {
      if (data.flag && data.id === this._uid) {
        this.$emit("update:nodeConfig", data.value);
      }
    },
    copyerConfig1(data) {
      if (data.flag && data.id === this._uid) {
        this.$emit("update:nodeConfig", data.value);
      }
    },
    conditionsConfig1(data) {
      if (data.flag && data.id === this._uid) {
        this.$emit("update:nodeConfig", data.value);
      }
    },
  },
  methods: {
    delNode() {
      this.$emit("update:nodeConfig", this.nodeConfig.childNode);
    },
    addTerm() {
      let len = this.nodeConfig.conditionNodes.length + 1;
      this.nodeConfig.conditionNodes.push({
        nodeName: "分支节点" + len,
        type: 3,
        conditionList: [],
        nodeUserList: [],
        childNode: null,
      });
      for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
        this.nodeConfig.conditionNodes[i].error =
          this.$func.conditionStr(this.nodeConfig, i) == "请设置条件" &&
          i != this.nodeConfig.conditionNodes.length - 1;
      }
      this.$emit("update:nodeConfig", this.nodeConfig);
    },
    delTerm(index) {
      this.nodeConfig.conditionNodes.splice(index, 1);
      this.nodeConfig.conditionNodes.map((item, index) => {
        item.nodeName = `条件${index + 1}`;
      });
      for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
        this.nodeConfig.conditionNodes[i].error =
          this.$func.conditionStr(this.nodeConfig, i) == "请设置条件" &&
          i != this.nodeConfig.conditionNodes.length - 1;
      }
      this.$emit("update:nodeConfig", this.nodeConfig);
      if (this.nodeConfig.conditionNodes.length == 1) {
        if (this.nodeConfig.childNode) {
          if (this.nodeConfig.conditionNodes[0].childNode) {
            this.reData(
              this.nodeConfig.conditionNodes[0].childNode,
              this.nodeConfig.childNode
            );
          } else {
            this.nodeConfig.conditionNodes[0].childNode =
              this.nodeConfig.childNode;
          }
        }
        this.$emit(
          "update:nodeConfig",
          this.nodeConfig.conditionNodes[0].childNode
        );
      }
    },
    reData(data, addData) {
      if (!data.childNode) {
        data.childNode = addData;
      } else {
        this.reData(data.childNode, addData);
      }
    },
    setPerson() {
      var { type } = this.nodeConfig;
      if (type == 0) {
        return;
      } else {
        this.$store.commit("updateApprover", true);
        this.$store.commit("updateApproverConfig", {
          value: {
            ...JSON.parse(JSON.stringify(this.nodeConfig)),
            ...{
              settype: this.nodeConfig.settype ? this.nodeConfig.settype : 1,
            },
          },
          flag: false,
          id: this._uid,
        });
      }
    },
  },
};
</script>
<style>
.error_tip {
  position: absolute;
  top: 0px;
  right: 0px;
  transform: translate(150%, 0px);
  font-size: 24px;
}
.promoter_person .el-dialog__body {
  padding: 10px 20px 14px 20px;
}
.selected_list {
  margin-bottom: 20px;
  line-height: 30px;
}
.selected_list span {
  margin-right: 10px;
  padding: 3px 6px 3px 9px;
  line-height: 12px;
  white-space: nowrap;
  border-radius: 2px;
  border: 1px solid rgba(220, 220, 220, 1);
}
.selected_list img {
  margin-left: 5px;
  width: 7px;
  height: 7px;
  cursor: pointer;
}
</style>